<template>
  <div class="detail_container">
    <!-- 返回上一级 -->
    <CommonBack :title="title"></CommonBack>
    <!-- 轮播图 -->
    <div class="swiper-box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
        <van-swipe-item
          v-for="item in goodsInfo.pics"
          :key="item.pics_id"
          @click="clickItem()"
        >
          <img :src="item.pics_big" alt="" srcset="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 详细信息 -->
    <div class="goods_info_box">
      <!-- 价格 -->
      <div class="info_price">￥{{ goodsInfo.goods_price }}</div>
      <!-- 内容 -->
      <div class="info_content">
        <div class="left">{{ goodsInfo.goods_name }}</div>
        <div class="right">
          <van-icon name="star-o" />
          <span>收藏</span>
        </div>
      </div>
      <div class="yf">快递：免运费</div>
    </div>

    <!-- 富文本内容 -->
    <div v-html="goodsInfo.goods_introduce"></div>

    <!-- 底部商品导航 -->
    <div class="goods_nav">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o"  text="客服" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="total == 0 ? '' : total"
          @click="goToCart"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CommonBack from "@/components/CommonBack.vue";
import { Toast, ImagePreview } from "vant";
export default {
  name: "Detail",
  data() {
    return {
      title:'商品详情',
      // 商品详情信息
      goodsInfo: {},
    };
  },
  computed: {
    ...mapGetters({
      total: "total",
    }),
  },
  methods: {
    firstCreate() {
      this.$store.commit("changeTabShow");
      // 重置window的滚动距离
      window.scrollTo(0, 0);
    },
    async getGoodsInfo() {
      let storage = JSON.parse(sessionStorage.getItem('goodsInfo'))
      if(storage && storage.gid === this.$route.params.id){
        this.goodsInfo = storage.message
        return
      }
      const { data: res } = await this.$http.get(
        `/api/public/v1/goods/detail?goods_id=${this.$route.params.id}`
      );
      if (res.meta.status !== 200) return Toast.fail("数据请求失败");
      this.goodsInfo = res.message;
      const obj = {
        gid:this.$route.params.id,
        message:res.message
      }
      sessionStorage.setItem('goodsInfo' , JSON.stringify(obj))
      console.log(res);
    },

    // 图片预览
    clickItem() {
      let pics_big_url = [];
      this.goodsInfo.pics.map((item) => {
        pics_big_url.push(item.pics_big_url);
      });
      ImagePreview(pics_big_url);
    },

    // 加入购物车
    addCart() {
      const goods = {
        goods_id: this.goodsInfo.goods_id, // 商品的Id
        goods_name: this.goodsInfo.goods_name, // 商品的名称
        goods_price: this.goodsInfo.goods_price, // 商品的价格
        goods_count: 1, // 商品的数量
        goods_small_logo: this.goodsInfo.goods_small_logo, // 商品的图片
        goods_state: true,
        goods_selectCount:1 // 选中的数值
      };

      this.$store.commit("addCart", {...goods});
    },

    // 底部导航事件
    // 点击购物车去往购物车页面
    goToCart() {
      this.$router.push({
        path: "/cart",
      });
    },
  },
  components: {
    CommonBack,
  },
  created() {
    this.firstCreate();
    this.getGoodsInfo();
  },
  destroyed() {
    this.$store.commit("changeTabShow");
  },
};
</script>

<style lang="less" scoped>
.detail_container {
  padding-top: 54px;
  .swiper-box {
    /deep/ .van-swipe {
      height: 21.9727rem;
      .van-swipe-item {
        img {
          width: 100%;
          height: 100%;
        }
      }
      .van-swipe__indicator {
        background-color: #bdbdbd;
      }
    }
  }

  .goods_info_box {
    margin-bottom: 1.7578rem;
    .info_price {
      text-align: left;
      color: #c00000;
      font-size: 18px;
      margin: 10px;
    }
    .info_content {
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      .left {
        flex: 85%;
        text-align: left;
        padding-right: 10px;
      }
      .right {
        flex: 15%;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #efefef;
        color: gray;
      }
    }
    .yf {
      font-size: 12px;
      color: #808080;
      text-align: left;
      padding: 0 10px;
    }
  }
}
</style>